<template>
  <div :key="`login_panel_${ruleForm.loginType}`" class="login" @keyup.enter="submitForm('ruleForm')">
    <div class="login-header">
      <div class="header-outer">
        <div class="logo-img" />
        <div class="logo-title">
          <div class="title">六安智慧环保（二期）环境大数据平台</div>
<!--          <div class="sub-title">六安市生态环境局</div>-->
        </div>
      </div>
    </div>
    <div class="login-content">
      <div class="login-form">
        <div class="login-form-title">欢迎登录</div>
        <template v-if="ruleForm.loginType ===1">
          <el-form
            ref="ruleForm"
            key="ruleForm1"
            :model="ruleForm"
            :rules="rules"
            autocomplete="off"
            class="login-form-body"
          >
            <el-form-item prop="mobile">
              <el-input v-model="ruleForm.mobile" type="text" placeholder="请输入手机号码" class="input-control-medium" autocomplete="off" />
            </el-form-item>
            <el-form-item prop="smsCode">
              <div class="input-control-label">
                <el-input v-model="ruleForm.smsCode" type="text" placeholder="请输入验证码" class="input-control-medium input-control-vlid" autocomplete="off" />
              </div>
              <div class="input-control-vlidcode">
                <el-button type="button" class="vlidcode-button" :disabled="getSendDisabled" @click="sendSmsCode('ruleForm')">
                  {{ getSendText }}
                </el-button>
              </div>
            </el-form-item>
            <el-form-item>
              <a href="javascript:void(0);" class="toggle-link" @click="toggleLogin">{{ ruleForm.loginType ===1 ?
                '使用手机号密码登录>>' :'使用手机验证码登录>>' }}</a>
            </el-form-item>
            <el-form-item class="login-btn">
              <el-button :disabled="disabled" type="primary" class="submit-button" @click="submitForm('ruleForm')">
                {{ logintext }}
              </el-button>
            </el-form-item>
          </el-form>
        </template>
        <!--用户名密码登录-->
        <template v-else>
          <el-form
            ref="ruleForm"
            key="ruleForm2"
            :model="ruleForm"
            :rules="rules"
            autocomplete="off"
            class="login-form-body"
          >
            <el-form-item prop="userName">
              <el-input v-model="ruleForm.userName" type="text" placeholder="请输入账号" class="input-control-medium" autocomplete="off" />
            </el-form-item>
            <el-form-item prop="passWord">
              <el-input v-model="ruleForm.passWord" type="password" placeholder="请输入密码" class="input-control-medium" autocomplete="off" />
            </el-form-item>
            <!--<el-form-item prop="capCode">
              <div class="input-control-label">
                <el-input v-model="ruleForm.capCode" type="text" placeholder="请输入验证码" class="input-control-medium input-control-vlid" autocomplete="off" />
              </div>
              <div v-show="ruleForm.loginType===2" class="input-control-vlidcode">
                <img :src="captchaImage" alt="验证码初始失败" class="vlidcode" title="点击刷新验证码" @click="refreshVlidCode()">
              </div>
            </el-form-item>-->
            <!--<el-form-item>
              <a href="javascript:void(0);" class="toggle-link" @click="toggleLogin">{{ ruleForm.loginType ===1 ?
                '使用手机号密码登录>>' :'使用手机验证码登录>>' }}</a>
            </el-form-item>-->
            <el-form-item class="login-btn">
              <el-button :disabled="disabled" type="primary" class="submit-button" @click="submitForm('ruleForm')">
                {{ logintext }}
              </el-button>
            </el-form-item>
          </el-form>
        </template>
      </div>
    </div>
    <div class="login-footer">
      <p class="copyrights">技术支持：<el-link href="http://www.jointsky.com" target="_blank">西安交大长天软件股份有限公司</el-link> <span style="margin:0 5px;" /> 浏览器建议使用谷歌，IE浏览器建议IE11及以上</p>
    </div>
  </div>
</template>
<script src="./assets/login.js"></script>
<style lang="scss">
  $img: "./assets/img";
  @import "@/assets/style/global.scss";
  @import "./assets/login.scss";
</style>
